<template>
  <van-nav-bar title="分类" left-text="" left-arrow @click-left="
    () => {
      $router.push('/');
    }
  " fixed />
  <div style="height: 45px"></div>
  <van-row>
    <van-col span="6">
      <van-sidebar v-model="active">
        <van-sidebar-item v-for="item in claData" :key="item.cat_name" :title="item.cat_name" />
      </van-sidebar>
    </van-col>
    <van-col span="18">
      <template v-if="claData[active]">
        <div v-for="childItem in claData[active]?.children" :key="childItem.cat_name">
          <h4>{{ childItem.cat_name }}</h4>
          <router-link :to="{
            name: 'claList',
            params: { cat_name: childItem.cat_name },
          }">
            <van-grid :column-num="4">
              <van-grid-item v-for="gridItem in childItem.children" :key="gridItem.cat_name" :icon="gridItem.cat_icon"
                :text="gridItem.cat_name" />
            </van-grid>
          </router-link>
        </div>
      </template>
    </van-col>
  </van-row>
</template>

<script setup>
import { ref } from "vue";
const active = ref(0);
const claData = ref([]);
import { getClaApi } from "@/api/api";
getClaApi().then((res) => {
  console.log("res: ", res);
  claData.value = res.data.message;
});
</script>

<style></style>
